<!-- 数量估清 - 组件 -->
<template>
  <div>
    <div class="countAppraise-wrap">
      <template v-if="!isEmpty(selectNeedCountAppraiseFood)">
        <div class="title-box">数量沽清</div>
        <div class="food-input-box">
          <el-image
            class="image"
            v-if="!isEmpty(selectNeedCountAppraiseFood.images)"
            :src="selectNeedCountAppraiseFood.images[0].file.preview_url"
            fit="cover"
            :lazy="true"
          >
            <template #placeholder>
              <div class="img-placeholder"></div>
            </template>
            <template #error>
              <img class="image" src="@/assets/images/home/not-goodimage.png" alt="" />
            </template>
          </el-image>
          <!-- 无商品图片的判断 -->
          <img class="image" v-else src="@/assets/images/home/not-goodimage.png" alt="" />
          <div class="desc-box">
            <div class="name">{{ selectNeedCountAppraiseFood.name }}</div>
            <div class="count">现有数量</div>
            <div class="input-box">
              <input
                class="input"
                v-model="keyword"
                type="text"
                placeholder="请输入现有数量"
                :disabled="loading"
                max="1000000000"
              />
              <img
                class="close-image"
                src="@/assets/images/home/input-clear.png"
                alt=""
                @click="handleClearInput"
                v-if="keyword"
              />
            </div>
            <div class="tips-box">
              <img class="image" src="@/assets/images/home/bingtai-tishi.png" alt="" srcset="" />
              <div class="desc">数量为空默认为不限制</div>
            </div>
          </div>
        </div>
        <div class="number-keyword-box">
          <!-- 数字键盘组件 -->
          <NumberKeyboard
            v-model:keyword="keyword"
            @onInputKeyboard="onInputKeyboard"
            @onCancel="handleClearInput"
            @onConfirm="onConfirm"
            :showRadixPoint="selectNeedCountAppraiseFood.is_weight === 1"
            :loading="loading"
            :disabledDecimal="selectNeedCountAppraiseFood.is_weight === 0"
            cancelText="清空"
          />
        </div>
      </template>

      <!-- 暂无数据的组件 -->
      <div class="no-data-box" v-else>
        <NotData desc="请在左侧选择对应菜品" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { isEmpty, throttle } from '@/utils/toolsValidate'
import { foodCountAppraise } from '@/api/appraise'
import NumberKeyboard from '@/components/NumberKeyboard/Index.vue'
import NotData from '@/components/NotData/Index.vue'

interface Props {
  // 已估清的菜品列表
  selectNeedCountAppraiseFood: any
}

const props = defineProps<Props>()
const emit = defineEmits(['onConfirm'])

// 关键词
const keyword = ref('')
// loading
const loading = ref(false)

// 清空输入框
const handleClearInput = () => {
  keyword.value = ''
}

// 接收数字键盘传过来的关键词
const onInputKeyboard = (val: string) => {
  keyword.value = val
}

// 确认提交事件
const onConfirm = throttle(async () => {
  if (loading.value) return
  const datas = {
    // 0:清空所有售罄菜品  1:清空选中菜品
    food_id: props.selectNeedCountAppraiseFood.id,
    num: keyword.value ? Number(keyword.value) : -1
  }
  try {
    loading.value = true
    const res = await foodCountAppraise(datas)
    if (res.status === 200) {
      ElMessage.success('操作成功')
      emit('onConfirm')
      keyword.value = ''
    }
  } catch (error) {
    console.error('数量估清失败:', error)
  } finally {
    loading.value = false
  }
}, 300)
</script>

<style lang="scss" scoped>
.countAppraise-wrap {
  // width: 976px;
  min-height: calc(100vh - 100px); // 设置最小高度
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  transition: all 1s;
  display: flex;
  flex-direction: column;

  .title-box {
    height: 80px;
    line-height: 80px;
    font-size: 24px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; // 防止压缩
  }

  .food-input-box {
    display: flex;
    align-items: center;
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; // 防止压缩

    .image {
      flex-shrink: 0;
      width: 173px;
      height: 130px;
      border-radius: 12px;
      margin-right: 20px;
      object-fit: cover;
    }
    .img-placeholder {
      width: 173px;
      height: 130px;
      border-radius: 12px;
      margin-right: 20px;
      background: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .desc-box {
      flex: 1;
      .name {
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        color: #30314a;
        margin-bottom: 10px;
      }
      .count {
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
      }
      .input-box {
        position: relative;
        width: 200px;
        height: 46px;
        border: 1px solid #d2d2d2;
        border-radius: 25px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding-left: 20px;
        margin-bottom: 10px;

        .input {
          border: none;
          outline: none;
          width: 140px;
          font-size: 16px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333;
        }
        .close-image {
          position: absolute;
          right: 15px;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      .tips-box {
        display: flex;
        align-items: center;
        .image {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
        .desc {
          font-size: 14px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }

  .number-keyword-box {
    flex: 1; // 占据剩余空间
    min-height: 400px; // 设置最小高度
    max-height: calc(100vh - 500px); // 设置最大高度，避免超出屏幕
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto; // 如果内容过多，允许滚动
  }
}

.no-data-box {
  margin-top: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
